Donut Chart একটি বিশেষ ধরনের Pie Chart যা কেন্দ্রে একটি খালি অংশ রাখে, যা দেখতে ডোনাটের মতো হয়। এটি সাধারণত ডেটার পার্সেন্টেজ ভিত্তিক অংশগুলোকে সহজভাবে উপস্থাপন করতে ব্যবহৃত হয়। Google Charts এর মাধ্যমে সহজেই Donut Chart তৈরি করা সম্ভব এবং এটি ডেটা ভিজ্যুয়ালাইজেশনের জন্য একটি কার্যকর টুল।
১. Google Charts এর মাধ্যমে Donut Chart তৈরি করা
Google Charts লাইব্রেরি ব্যবহার করে Donut Chart তৈরি করতে, আপনাকে প্রথমে Pie Chart তৈরি করার মতো সাধারণ সেটআপ করতে হবে। তারপর, Pie Chart এর pieSliceText অপশন ব্যবহার করে এটিকে Donut Chart এ রূপান্তর করা হয়।
HTML এবং JavaScript কোড উদাহরণ
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Google Donut Chart Example</title>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
// Google Charts লোড করা
google.charts.load('current', {packages: ['corechart', 'pie']});
// কলব্যাক ফাংশন
google.charts.setOnLoadCallback(drawChart);
// Donut Chart তৈরি করার ফাংশন
function drawChart() {
var data = google.visualization.arrayToDataTable([
['Category', 'Amount'],
['Food', 45],
['Rent', 25],
['Utilities', 15],
['Entertainment', 10],
['Others', 5]
]);
var options = {
title: 'Monthly Expenses Distribution',
pieHole: 0.4, // এই অপশনটি ডোনাটের মাঝের অংশ খালি রাখবে
is3D: true, // 3D প্রভাব প্রয়োগ করা
slices: {
0: {offset: 0.1}, // প্রথম স্লাইস (Food) এর জন্য কিছুটা সরে রাখা
},
pieSliceText: 'percentage', // প্রতিটি স্লাইসের পার্সেন্টেজ প্রদর্শন
};
var chart = new google.visualization.PieChart(document.getElementById('donut_chart'));
chart.draw(data, options);
}
</script>
</head>
<body>
<h2>Google Donut Chart Example</h2>
<div id="donut_chart" style="width: 900px; height: 500px;"></div>
</body>
</html>
কোড ব্যাখ্যা
Google Charts লাইব্রেরি লোড করা: আমরা
corechartএবংpieপ্যাকেজ লোড করছি, যেগুলি Pie এবং Donut Chart তৈরি করতে সাহায্য করবে।google.charts.load('current', {packages: ['corechart', 'pie']});- ডেটা প্রস্তুত করা:
google.visualization.arrayToDataTable()ফাংশনের মাধ্যমে ডেটাকে টেবিল ফরম্যাটে তৈরি করা হয়েছে, যাতে Food, Rent, Utilities ইত্যাদি ক্যাটেগরি অনুযায়ী খরচের পরিমাণ প্রদান করা যায়। - ডোনাট চার্টের অপশন সেট করা:
pieHole: 0.4: এই অপশনটি চার্টের মাঝখানে 40% খালি রাখে, যা ডোনাট চার্টের দৃশ্য তৈরি করে।is3D: true: এটি চার্টটিকে 3D প্রভাব দেয়।pieSliceText: 'percentage': প্রতিটি স্লাইসের পার্সেন্টেজ ডেটা প্রদর্শন করার জন্য এই অপশনটি ব্যবহার করা হয়।
- চার্ট তৈরি এবং প্রদর্শন:
google.visualization.PieChart()ফাংশন দিয়ে ডেটা দিয়ে ডোনাট চার্ট তৈরি করা হয় এবং এটি HTML ডকুমেন্টে প্রদর্শিত হয়।
Donut Chart কিভাবে ব্যবহার করবেন
- বিভিন্ন ক্যাটেগরি দেখানো: Donut Chart সাধারণত ক্যাটেগরি ভিত্তিক ডেটা দেখানোর জন্য ব্যবহৃত হয়, যেমন মাসিক খরচ, রাজস্ব বিভাজন, বাজার শেয়ার ইত্যাদি।
- ডেটা পার্সেন্টেজ ভিজ্যুয়ালাইজেশন: এটি আপনাকে একটি স্পষ্ট এবং সহজভাবে ডেটার বিভিন্ন অংশকে তুলনা করতে সাহায্য করে।
- অংশবিশেষে ফোকাস: Donut Chart এর মাধ্যমে আপনি কোন বিশেষ অংশকে ফোকাস করতে পারদর্শী, যেমন স্লাইসগুলোকে আলাদা করে দেখানো।
২. কিছু অতিরিক্ত কাস্টমাইজেশন
Google Charts এ Donut Chart তৈরি করার সময় আপনি আরও কিছু কাস্টমাইজেশন করতে পারেন:
- রঙ পরিবর্তন: আপনি প্রতিটি স্লাইসের রঙ কাস্টমাইজ করতে পারেন, উদাহরণস্বরূপ:
slices: {
0: {offset: 0.1, color: 'blue'},
1: {offset: 0.1, color: 'green'},
2: {offset: 0.1, color: 'red'},
}
- টুলটিপ কাস্টমাইজেশন: আপনি টুলটিপের কন্টেন্ট কাস্টমাইজ করতে পারেন:
tooltip: { trigger: 'selection' }
- অ্যানিমেশন: অ্যানিমেশন অ্যাড করতে পারেন, যাতে চার্টটি প্রথমে কিছুটা প্রভাব দিয়ে প্রদর্শিত হয়।
উপসংহার
Google Charts এর মাধ্যমে Donut Chart তৈরি করা খুবই সহজ এবং কার্যকরী। এটি ডেটাকে আকর্ষণীয়ভাবে এবং পরিষ্কারভাবে উপস্থাপন করতে সাহায্য করে। আপনি এটিকে আপনার ওয়েবসাইট বা অ্যাপ্লিকেশনগুলোতে ব্যবহার করে ডেটা বিশ্লেষণ করতে পারেন এবং ব্যবহারকারীদের কাছে সহজভাবে তথ্য উপস্থাপন করতে পারবেন।
Read more
